import React from 'react'
import { View, Text, Input } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.scss'
import RecommendedReading from './components/RecommendedReading'
import SearchHeader from './components/searchheader/SearchHeader'

export default function Index () {
  useLoad(() => {
    console.log('Page loaded.')
  })

  
  return (
    <View className='index'>
      {/* 顶部搜索框 */}
      <SearchHeader title='搜活动 搜资源'/>

      {/* 选项卡导航 */}
      <View className='tab-nav'>
        <Text className='tab-item active'>推荐</Text>
        <Text className='tab-item'>读好书</Text>
        <Text className='tab-item'>承传统</Text>
        <Text className='tab-item'>塑美德</Text>
        <Text className='tab-item'>立良行</Text>
        <Text className='tab-item'>树榜眼</Text>
      </View>

      {/* 推荐内容区域 */}
      <RecommendedReading />

      {/* 底部导航栏 */}
      <View className='tab-bar'>
        <View className='tab-bar-item active'>
          <Text>首页</Text>
        </View>
        <View className='tab-bar-item'>
          <Text>活动</Text>
        </View>
        <View className='tab-bar-item'>
          <Text>朗读</Text>
        </View>
        <View className='tab-bar-item'>
          <Text>个人中心</Text>
        </View>
      </View>
    </View>
  )
}
